<template>
  <div id="app">
    <site-header class="header" id="site-header" />
    <keep-alive :include="cacheItems">
      <router-view />
    </keep-alive>
    <div class="contact-panel">
      <a-button class="contact-button" type="primary" @click="contactClick()">联系我们</a-button>
    </div>
    <site-footer class="footer" id="site-footer" />

    <j-modal :visible="visible" :width="width" switchFullscreen @cancel="handleCancel" :footer="null">
      <chat-section ref="chatSection" v-model="chatSectionModelvisible"></chat-section>
    </j-modal>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Header from '@/components/htxincailiao/header/Header.vue'
import Footer from '@/components/htxincailiao/Footer.vue'
import { timeStringYMDHMS } from '@/utils/date-time.js'
import ChatSection from '@/views/chat/Section.vue'

export default {
  name: 'App',
  components: {
    'site-header': Header,
    'site-footer': Footer,
    'chat-section': ChatSection,
  },

  data() {
    return {
      cacheItems: ['SearchList'],
      visible: false,
      width: 800,
      chatSectionModelvisible: false,
    }
  },

  computed: {
    ...mapState('platformVisit', {
      visitInfo: (state) => state.info,
    }),

    ...mapState('guest', {
      guestInfo: (state) => state.info,
    }),

    visitId: {
      cache: false,
      get() {
        const getVisitId = this.$store.getters['platformVisit/getVisitId']
        // console.log('\n\n getVisitId:' + JSON.stringify(getVisitId()) + '\n\n')
        return getVisitId()
      },
    },

    leaveTime: {
      cache: false,
      get() {
        const getLeaveTime = this.$store.getters['platformVisit/getLeaveTime']
        // console.log('\n\n getLeaveTime:' + JSON.stringify(getLeaveTime()) + '\n\n')
        return getLeaveTime()
      },
    },
  },

  watch: {
    chatSectionModelvisible: {
      immediate: true,
      handler(val, oldValue) {
        console.log('\n\n' + 'chatSectionModelvisible' + '\n\n')
        if (!val) {
          this.visible = false
        }
      },
    },
  },

  created() {
    let that = this

    that.platformVisitBeginTrack()

    window.onload = () => {
      const loadTime = new Date().getTime()
      const leaveTime = this.leaveTime
      const gap = loadTime - leaveTime
      if (gap > 2000) {
        // console.log('重新进入页面')
        that.platformVisitBeginTrack()
      } else {
        // console.log('刷新页面')
      }
    }
  },

  mounted() {
    const that = this
    document.addEventListener('visibilitychange', function logData() {
      if (document.visibilityState === 'hidden') {
        // console.log('\n\n' + 'document visibilityState hidden' + '\n\n')
        let apiBaseUrl =
          process.env.NODE_ENV === 'development'
            ? process.env.VUE_APP_API_ORIGIN + '/api'
            : process.env.VUE_APP_API_BASE_URL
        const url = apiBaseUrl + '/analytics/hTPlatformVisitAction/visitEdit'
        const date = new Date()
        const leaveTime = timeStringYMDHMS(date)
        const id = that.visitId
        const parameters = {
          id,
          leaveTime: leaveTime,
        }
        that.$store.commit('platformVisit/SET_LEAVE_TIME', date.getTime())
        navigator.sendBeacon(url, JSON.stringify(parameters))
      }
    })
  },

  methods: {
    handleCancel() {
      this.visible = false
    },

    contactClick() {
      const that = this
      this.visible = true
      this.$nextTick(() => {
        var query = { chatType: 0 }
        if (that.isSignedIn) {
          query = { chatType: 1 }
        }
        that.$refs.chatSection.show(query)
      })

      // this.$refs.chatSection.show(query);
      // const that = this
      // let routeUrl = that.$router.resolve({
      //   path: '/chat/section',
      //   query: { chatType: 0 },
      // })
      // window.open(routeUrl.href, '_blank')
      //  this.$router.push({
      //   path: '/chat/section',
      //   query: { chatType:0 },
      // })
    },

    platformVisitBeginTrack() {
      const that = this

      const visitTime = timeStringYMDHMS(new Date())
      const parameters = {
        visitTime: visitTime,
      }
      // console.log('\n\n visitTime:' + JSON.stringify(visitTime) + '\n\n')
      that.$store
        .dispatch('platformVisit/visitPlatformAction', parameters)
        .then(() => {})
        .catch(() => {})
    },
  },
}
</script>

<styles coped lang="less">
.page-container {
  min-height: 100%;
  // height: 100vh;
}

.main-pc {
  min-height: ~'calc(100vh - 132px - 416px)';
}

.router-view {
  margin: 0 auto;
  width: var(--viewport-content-width);
}

.contact-button {
  margin: 20px 10px;
  min-height: 30px;
}

.contact-panel {
  position: fixed;
  top: ~'calc(50vh + 32px)';
  right: 0;
  width: 120px;
  height: 40px;
  /* background: white; */
  background: clear;
  /* border: 1px solid rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</styles>
